<template>
    <div>
        <van-cell
                style="background-image: url(https://img12.360buyimg.com/img/s1500x886_jfs/t1/115726/22/13102/240974/5f18fb83Ee40e230b/d4f2a67087fd443a.png);background-size:100%">
            <table>
                <tr>
                    <td><!---->

                        <img style="width:80px; height:80px; border-radius:50%; " :src="this.user.userPhoto"/>
                        <!--<van-image style="width: 90px" round
                        src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1671247724,3484152546&fm=26&gp=0.jpg"/>-->
                    </td>
                    <td style="position: relative;left:20px;color: #ffffff;">
                        <span style="font-size: 20px">
                            {{this.user.userName}}
                        </span>
                        <br>
                        <span>
                            会员编号：<span>{{this.user.userId}}</span>
                        </span>
                        <van-icon @click="goToMyAccountSetting" name="setting"
                                  style="position: fixed;top: 15px;right:20px;" size="18px"/>
                    </td>
                </tr>
            </table>
            <div style="display: flex; justify-content: space-between;color: #ffffff;text-align: center">
                <span @click="goToCollect">
                    <span style="font-size: 20px">85</span><br>
                    <span>我的收藏</span>
                </span>
                <span>
                    <span style="font-size: 20px">43</span><br>
                    <span>我的关注</span>
                </span>
                <span>
                    <span style="font-size: 20px">68</span><br>
                    <span>我的足迹</span>
                </span>
            </div>
        </van-cell>
        <van-grid :column-num="5">
            <van-grid-item icon="shopping-cart-o" :badge="daiFuKuan" text="待付款" :to="{ path: '/OrderStatus/1'}"/>
            <van-grid-item icon="logistics" :badge="daiShouHuo" text="待收货" :to="{ path: '/OrderStatus/2'}" />
            <van-grid-item icon="smile-o" :badge="shouHou" text="退货/售后" :to="{ path: '/OrderStatus/5'}"/>
            <van-grid-item icon="completed" text="已完成" :to="{ path: '/OrderStatus/4'}"/>
            <van-grid-item icon="orders-o" text="全部订单" :to="{ path: '/OrderStatus/88'}"/>
        </van-grid>
        <van-divider/>
        <van-cell>
            <div style="display: flex; justify-content: space-between;color: #000000;text-align: center">
                 <span>
                    <span style="font-size: 20px">5</span><br>
                    <span>优惠券</span>
                </span>
                <span>
                    <span style="font-size: 20px">600</span><br>
                    <span>粉钻</span>
                </span>
                <span>
                    <span style="font-size: 20px">15</span><br>
                    <span>红包</span>
                </span>
                <span>
                    <span style="font-size: 20px">43</span><br>
                    <span>白条余额</span>
                </span>
                <span>
                    <span style="font-size: 20px">10</span><br>
                    <span>今日推荐</span>
                </span>
            </div>
        </van-cell>
        <van-divider>
            <template #default>
                为您推荐

            </template>
        </van-divider>
        <div>
            <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                <van-swipe-item>
                    <van-card
                            price="8699.00"
                            desc="强大的A13X中央处理器"
                            title="iPad Pro 2020"
                            thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
                            @click="goToGoods"
                    >
                    </van-card>
                </van-swipe-item>
                <van-swipe-item>
                    <van-card
                            price="8699.00"
                            desc="强大的A13X中央处理器"
                            title="iPad Pro 2020"
                            thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
                            @click="goToGoods"
                    >
                    </van-card>
                </van-swipe-item>
                <van-swipe-item>
                    <van-card
                            price="8699.00"
                            desc="强大的A13X中央处理器"
                            title="iPad Pro 2020"
                            thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
                            @click="goToGoods"
                    >
                    </van-card>
                </van-swipe-item>
                <van-swipe-item>
                    <van-card
                            price="8699.00"
                            desc="强大的A13X中央处理器"
                            title="iPad Pro 2020"
                            thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
                            @click="goToGoods"
                    >
                    </van-card>
                </van-swipe-item>
            </van-swipe>
        </div>
    </div>
</template>

<script>
import axios from "axios"
    export default {
        name: "Ppersonal",
        data() {
            return {
                data:4,
                userId:0,
                daiFuKuan:0,
                daiShouHuo:0,
                shouHou:0,
                user: [],
            }
        },
        created() {
            this.userId=this.users.userId;
            // 获取浏览器缓存
            var storage = window.localStorage;
            var user = JSON.parse(storage.getItem("user"));

            axios.get('http://localhost:8001/sign/redisQuery',{
                params: {
                    uid: user
                }
            }).then(result => {
               if (result.data != ""){
                    this.user = result.data;
               } else{
                   this.$router.push('/login');
               }
            });


            axios.get('http://localhost:8201/order/queryOrder',{
                params: {
                    userId: this.userId,
                    orderStatus:1,
                    page:0,
                    rows:999
                }
            }).then( result => {
                this.daiFuKuan=result.data.list.length

            });
            axios.get('http://localhost:8201/order/queryOrder',{
                params: {
                    userId: this.userId,
                    orderStatus:2,
                    page:0,
                    rows:999
                }
            }).then( result => {
                this.daiShouHuo=result.data.list.length

            });
            axios.get('http://localhost:8201/order/queryOrder',{
                params: {
                    userId: this.userId,
                    orderStatus:3,
                    page:0,
                    rows:999
                }
            }).then( result => {
                this.daiShouHuo=this.daiShouHuo+result.data.list.length

            });
            axios.get('http://localhost:8201/order/queryOrder',{
                params: {
                    userId: this.userId,
                    orderStatus:5,
                    page:0,
                    rows:999
                }
            }).then( result => {
                this.shouHou=result.data.list.length

            });


        },
        methods: {
            goToMyAccountSetting() {
                this.$router.push({path: './myAccountSetting'})
            },
            goToCollect() {
                this.$router.push({path: './myCollect'})
            }, goToGoods() {
                this.$router.push({path: '/goods'});
            }
        }
    }
</script>

<style scoped>
    body {
        font-family: 黑体;
    }

    .my-swipe .van-swipe-item {
        color: #fff;
        font-size: 20px;
        line-height: 150px;
        text-align: center;
        background-color: #39a9ed;
    }
</style>
